// FlowMonitor.vue
<template>
  <div class="init-container">
    <div class="flow-monitor">
      <!-- 时间戳和状态 -->
      <div class="status-bar">
        <span class="timestamp" :class="{ blink: timestampBlink }">
          {{ currentTime }}
        </span>
        <span class="comms-status">
          <span class="status-led" :style="commsLedStyle"></span>
          通讯正常
        </span>
      </div>

      <!-- 废水流量计双列布局 -->
      <div class="row">
        <WasteWaterFlow
          v-for="(flow, index) in wasteWaterData"
          :key="index"
          :data="flow"
          class="waste-flow-card"
        />
      </div>

      <!-- 其他流量计 -->
      <OtherFlowPanel :flows="otherFlowData" />
    </div>
  </div>
</template>

<script lang="ts">
import {
  T_srv,
  T_cmd,
  I_cmd,
  Tsrv,
  vue,
  N_flowMonitor,
  wasteWaterData,
  otherFlowData,
  ifs
} from './config';
import WasteWaterFlow from './WasteWaterFlow.vue';
import OtherFlowPanel from './OtherFlowPanel.vue';

@T_srv.comp({
  components: { WasteWaterFlow, OtherFlowPanel }
})
export default class cFlowMonitor extends vue {
  // 实时数据
  public wasteWaterData: N_flowMonitor.wasteWaterInfo[] = wasteWaterData();

  public otherFlowData: N_flowMonitor.otherFlowInfo = otherFlowData();

  private timestampBlink = false;

  private currentTime = '';

  private name = 'FlowMonitor';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  private compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    // 模拟实时更新
    // setInterval(this.updateData, 1000);
    setInterval(this.updateTimestamp, 1000);
    this.GT_command.startTask();
    this.receiveEvent();
  }

  private receiveEvent() {
    this.$bus.$on(
      '__PLC_CONNSTATE__',
      (data: { connState: boolean; ecBoxName: string }) => {
        if (data.ecBoxName === 'mianyang') {
          if (data.connState) {
            if (!this.GT_command.isOpenTask) {
              this.GT_command.startTask();
            }
          } else {
            this.GT_command.stopTask();
          }
        }
      }
    );
  }

  destroyed() {
    this.GT_command.stopTask();
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);
    this.$bus.$off('__PLC_CONNSTATE__');

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  private updateTimestamp() {
    this.currentTime = new Date().toLocaleString();
    this.timestampBlink = !this.timestampBlink;
  }

  get commsLedStyle() {
    return {
      backgroundColor: '#4CAF50',
      animation: 'breathing 1s infinite'
    };
  }

  // 数据更新逻辑（实际应接入WebSocket）
  public updateData(data: ifs.I_scadaReadResp['data']) {
    // 模拟数据变化...
    this.wasteWaterData.forEach(item => {
      Object.keys(item).forEach(key => {
        if (typeof item[key].code !== 'undefined') {
          if (
            key === 'instantaneousFlow' &&
            item[key].value !== data[item[key].code].v
          ) {
            item['prevFlow'] = item[key].value;
          }
          item[key].value = data[item[key].code].v;
        }
      });
    });

    // 更新其他流量计
    Object.keys(this.otherFlowData).forEach(key => {
      if (typeof this.otherFlowData[key].code !== 'undefined') {
        this.otherFlowData[key].value = data[this.otherFlowData[key].code].v;
      }
    });
  }
}
</script>

<style scoped>
/* 全局样式 */
.flow-monitor {
  padding: 20px;
  background: #f5f5f5;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.timestamp {
  font-family: 'Roboto Mono', monospace;
  color: #666;
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes breathing {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
</style>
